<template>
    <a-layout id="app">
        <a-layout-sider id="nav" theme="light" collapsible>
            <a-menu mode="inline" style="height:100%">
                <template v-for="(route_item, route_key) in menu_list">
                    <a-menu-item :key="route_key">
                        <router-link :to="'/'+route_item.path">
                            <a-icon :type="route_item.icon"/>
                            <span>{{route_item.title}}</span>
                        </router-link>
                    </a-menu-item>
                </template>
            </a-menu>
        </a-layout-sider>

        <a-layout style="padding: 15px">
            <router-view/>
        </a-layout>
    </a-layout>
</template>

<style lang="less">
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // text-align: center;
    height: 100%;
    color: #2c3e50;

    .ant-card-hoverable {
        cursor: auto;
    }
}
</style>

<script lang="ts">
import _ from "lodash";
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Home extends Vue {
    get menu_list(): object {
        return _.fromPairs(
            _.map(
                [
                    // key, path, icon, title
                    ["home", "", "home", "Home 首页"],
                    ["file", "file", "file", "文件测试"],
                    ["file_reader", "file_reader", "file", "文件读取"],
                    // ["mysql", "mysql_test", "search", "mysql 数据库使用"],
                    ["sqlite", "sqlite_test", "search", "sqlite 数据库使用"],
                    // ["lowdb", "lowdb_test", "search", "lowDB 数据库测试"],
                    // ["printer", "printer_test", "printer", "打印测试"],
                    ["screenshot", "screenshot", "picture", "截图测试"],
                    ["httpserver", "httpserver", "cloud", "网站服务"],
                    ["about", "about", "ellipsis", "About 关于"]
                ],
                v => {
                    let [key, path, icon, title] = v;
                    return [key, { path, icon, title }];
                }
            )
        );
        /*
        return {
            home: { path: "", icon: "home", title: "Home 首页" },
            printer: { path: "printer_test", icon: "printer", title: "打印测试" },
            about: { path: "about", icon: "ellipsis", title: "About 关于" }
        };
        */
    }
}
</script>